<template>
	<view class="page" style="background-color: #FFFFFF;border-top: 2rpx solid #e8e8e8;box-sizing: border-box;">
		<view class="notice-header f-row">
			<view class="notice-number single-text">序号</view>
			<view class="notice-message f-1 single-text">消息名称</view>
			<view class="notice-date single-text">日期</view>
		</view>
		<scroll-view style="height: calc(100vh - 70rpx);position: relative;top: 70rpx;" scroll-y="true" scroll-x="false" v-if="data.length > 0">
			<view class="notice-item f-row" v-for="(item , index) in data" :key="index">
				<view class="notice-number single-text">{{item.notice.notice_id}}</view>
				<view class="notice-message f-1 single-text">{{item.notice.notice_title}}</view>
				<view class="notice-date single-text">{{item.notice.create_time}}</view>
			</view>
		</scroll-view>
		<loadingmore :statusObject="statusObject" @reload="reload" v-else></loadingmore>
	</view>
</template>

<script>
	let _this;
	import loadingmore from '../../components/loading-more.vue'
	import OTHER from '../../api/other.js'
	import { showToast } from '../../lib/utils.js'
	export default {
		components: {
			loadingmore
		},
		data() {
			return {
				data: [],
				page: 1,
				limit: 20,
				statusObject: { status : 0 },
			}
		},
		onLoad() {
			_this = this;
			_this.requestData();
		},
		methods: {
			reload() {
				_this.data = [];
				_this.page = 1;
				_this.statusObject = { status : 0 }
				_this.requestData();
			},
			requestData() {
				OTHER.noticeLst({ page: _this.page , limit: _this.limit }).then((res) => {
					_this.data = _this.data.concat(res.list);
					if(res.count == 0) {
						_this.statusObject = {
							status: 1
						}
					}
					else if (_this.data.length == res.count) {
						_this.statusObject = {
							status: 2
						}
						_this.page += 1;
					} else {
						_this.statusObject = {
							status: 3
						}
						_this.page += 1;
					}
				}).catch((err) => {
					console.log(err);
					_this.statusObject = {
						status: -1
					};
					showToast(err.data.message);
				});
			}
		}
	}
</script>

<style>
.notice-header{
	border-bottom: 2rpx solid #e8e8e8;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	background-color: #FFFFFF;
}
.notice-item ,.notice-header{
	height: 70rpx;
}
.notice-item view,.notice-header view {
	height: 68rpx;
	line-height: 68rpx;
	font-size: 26rpx;
	text-align: center;
}
.notice-number{
	width: 100rpx;
}
.notice-message{
	flex: 1;
}
.notice-date {
	width: 300rpx;
}
</style>
